<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="w-animated w-fadeIn"
    leave-active-class="w-animated w-fadeOut"
  >
    <div v-if="isShow" class="w-image-show">
      <el-carousel :autoplay="false" class="w-image-views-box" type="card" height="100%">
        <el-carousel-item v-for="item in images" :key="item" class="w-image-views-item">
          <div :style="bgImage(item || defaultImage)" class="item-imge w-image-fill"/>
        </el-carousel-item>
      </el-carousel>
      <i class="el-icon-error w-exit w-pointer" @click.stop="close"/>
    </div>
  </transition>
</template>

<script lang="ts">
import { mapGetters } from "vuex";
import { UrlClearFormat } from "yb-tool";
import { Component, Vue, Inject } from "vue-property-decorator";
import { Getter } from "vuex-class";

@Component({})
export default class ImageShow extends Vue {
  @Inject()
  private bgImage!: (
    url: string,
    style?: CSSStyleDeclaration
  ) => CSSStyleDeclaration;

  @Getter("defaultImage") defaultImage!: string;

  isShow = false;
  images: string[] = [];

  show(images: string[]) {
    this.images = images.map(url => {
      return UrlClearFormat(url);
    });
    this.isShow = true;
  }
  close() {
    this.isShow = false;
    this.images = [];
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.w-image-show {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(1, 1, 1, 0.7);
  z-index: 2000;
  .w-image-views-box {
    height: 100%;
    > .el-carousel__container {
      height: calc(100vh - 40px) !important;
      .w-image-views-item {
        .item-imge {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  > .w-exit {
    font-size: 40px;
    position: absolute;
    right: 40px;
    top: 20px;
    color: #999999;
    z-index: 2001;
  }
  > .w-exit:hover {
    color: #dd6161;
  }
}
</style>
